<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper" v-if="hasPerm('sysRole:page')">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="租户名称">
              <a-input v-model.trim="queryParam.name" allow-clear placeholder="请输入租户名称" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="联系电话">
              <a-input v-model.trim="queryParam.contactMobile" allow-clear placeholder="请输入联系电话" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status" allowClear placeholder="请选择状态">
                <a-select-option value="0">正常</a-select-option>
                <a-select-option value="1">停用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button
              style="margin-left: 8px"
              @click="
                () => {
                  ;(queryParam = {}), $refs.table.refresh()
                }
              "
              >重置</a-button
            >
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator" v-if="hasPerm('sysRole:add')">
      <a-button type="primary" v-if="hasPerm('sysRole:add')" icon="plus" @click="$refs.addForm.add()"
        >新增租户</a-button
      >
    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
      :rowKey="record => record.code"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="status" slot-scope="text, record">
        <a-switch
          :loading="loading"
          checked-children="正常"
          un-checked-children="停用"
          :checked="record.status === 0 ? true : false"
          @change="handelQuYangChange(record)"
        />
      </span>
      <span slot="createStatus" slot-scope="text, record">
        <a-tag :color="record.createStatus == '1' ? 'orange' : record.createStatus == '2' ? 'green' : 'red'">
          {{ record.createStatus == '1' ? '创建中' : record.createStatus == '2' ? '创建成功' : '创建失败' }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a v-if="hasPerm('sysRole:edit')" @click="$refs.editForm.edit(record)">编辑</a>
        <a-divider type="vertical" v-if="hasPerm('sysRole:edit')" />
        <a-dropdown v-if="hasPerm('sysRole:grantMenu') || hasPerm('sysRole:grantData') || hasPerm('sysRole:delete')">
          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
          <a-menu slot="overlay">
            <a-menu-item v-if="hasPerm('sysRole:grantMenu')">
              <a @click="$refs.roleMenuForm.roleMenu(record)">授权菜单</a>
            </a-menu-item>
            <a-menu-item v-if="hasPerm('sysRole:delete')">
              <a-popconfirm placement="topRight" title="确认重置密码？" @confirm="() => resetPasswords(record)">
                <a>重置密码</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item>
              <a @click="goToPay(record)">汇付账号</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>

    <add-form ref="addForm" @ok="handleOk" />
    <edit-form ref="editForm" @ok="handleOk" />
    <pay-form ref="payForm" @ok="handleOk" />
    <role-menu-form ref="roleMenuForm" @ok="handleOk" />
    <role-org-form ref="roleOrgForm" @ok="handleOk" />
    <payFormAdd ref="payFormAdd" @ok="handleOk" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { sysTenantPage, resetPasswords, sysTenantEditStatus } from '@/api/modular/system/roleManage'
import addForm from './addForm'
import editForm from './editForm'
import payForm from './payForm.vue'
import roleMenuForm from './roleMenuForm'
import roleOrgForm from './roleOrgForm'
import payFormAdd from '@/views/system/tenantManagement/payFormAdd.vue'

export default {
  components: {
    STable,
    addForm,
    editForm,
    payForm,
    payFormAdd,
    roleMenuForm,
    roleOrgForm
  },

  data() {
    return {
      loading: false,
      // 查询参数
      queryParam: {
        status:'0'
      },
      // 表头
      columns: [
        {
          title: '账号',
          dataIndex: 'account'
        },
        {
          title: '租户名称',
          dataIndex: 'name'
        },        {
          title: '公司全称',
          dataIndex: 'companyName'
        },
        {
          title: '联系人',
          dataIndex: 'contactName'
        },
        {
          title: '联系电话',
          dataIndex: 'contactMobile'
        },
        {
          title: '过期时间',
          dataIndex: 'expireTime'
        },
        {
          title: '创建状态',
          dataIndex: 'createStatus',
          scopedSlots: { customRender: 'createStatus' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return sysTenantPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },

  created() {
    if (
      this.hasPerm('sysRole:edit') ||
      this.hasPerm('sysRole:grantMenu') ||
      this.hasPerm('sysRole:grantData') ||
      this.hasPerm('sysRole:delete')
    ) {
      this.columns.push(
        {
          title: '状态',
          width: '150px',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      )
    }
  },

  methods: {
    goToPay(e) {
      if (e.isOpen == '1') {
        this.$refs.payForm.edit(e)
      } else {
        this.$refs.payFormAdd.edit(e)
      }
    },
    handelQuYangChange(record) {
      this.loading = true
      record.status = record.status === 1 ? 0 : 1
      sysTenantEditStatus({
        id: record.id,
        status: record.status
      })
        .then(res => {
          if (res.success) {
            this.$message.success('修改成功')
            this.loading = false
          } else {
            this.$message.error('修改失败：' + res.message)
            this.loading = false
          }
        })
        .catch(err => {
          this.$message.error('修改错误：' + err.message)
          this.loading = false
        })
    },
    resetPasswords(record) {
      resetPasswords({
        id: record.id
      })
        .then(res => {
          if (res.success) {
            this.$message.success('重置成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('重置失败：' + res.message)
          }
        })
        .catch(err => {
          this.$message.error('重置错误：' + err.message)
        })
    },

    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  }
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
